import React, {Component} from 'react'

import {View, Text} from '@tarojs/components'
import {AtTabs, AtTabsPane, AtFab, AtLoadMore} from 'taro-ui'
import CommentList from '../components/comment-list/index'
import {getStorageSync, PageNavTo, showToast} from '../../utils/common'
import {getDy} from "../../service/dynamic";
import './index.scss'


type PageStateProps = {
  store: {
    userStore: {
      userInfo: {},
    }
  }
}

type PageDispatchProps = {}

type PageOwnProps = {}

type PageState = {
  // DynamicList: []
  current: number
  isShow: boolean
  cate: []
  uID: ''
  cate_0: []
  cate_1: []
  cate_2: [],
  loadMoreState: any
  cate_total: number,
  page: number
}

type IProps = PageStateProps & PageDispatchProps & PageOwnProps

interface CampusSquare {
  props: IProps;
}

//todo  这里是分页查询，未作下拉加载  待优化
class CampusSquare extends Component<IProps, PageState> {
  state: any = {
    current: 0,
    isShow: false,
    uID: '',
    cate: [],
    cate_0: [],
    cate_1: [],
    cate_2: [],
    loadMoreState: 'more',
    cate_total: 1,
    page: 1
  }

  componentDidMount(): void {
    this.loaGetdDynamic()
  }

  componentDidShow() {
    this.loaGetdDynamic()
    this.loadShowAddDy()
  }


  // 判断用户登录
  loadShowAddDy = () => {
    let {id} = getStorageSync('userInfo')
    if (id) {
      this.setState({
        isShow: true,
        uID: id
      })
    }
  }

  // 获取动态
  loaGetdDynamic = async () => {
    const res = await getDy()
    this.setState({
      cate: res.list,
      loadMoreState: 'more',
      page: 1,
      cate_total: res.meta.total_pages
    })
  }

  handleClicCreateDyNamic = () => {
    PageNavTo('/pages/release-dynamic/index')
  }


  // tab切换
  handleClickTabChange = async (value) => {
    try {
      if (value === 0) {
        this.loaGetdDynamic()
      } else if (value === 1) {
        const res = await getDy({
          category: 0
        })
        if (res.code === 1) {
          this.setState({
            cate_0: res.list
          })
        }
      } else if (value === 2) {
        const res = await getDy({
          category: 1
        })
        if (res.code === 1) {
          this.setState({
            cate_1: res.list
          })
        }
      } else {
        const res = await getDy({
          category: 2
        })
        if (res.code === 1) {
          this.setState({
            cate_2: res.list
          })
        }
      }
    } catch (e) {
      showToast(
        '网络错误！'
      )
    }
    console.log(this.state.cate);
    this.setState({
      current: value
    })
  }

  loadMore = async () => {
    let {page, cate} = this.state
    console.log(page);
    const res = await getDy({
      page: page
    })
    cate.push(...res.list)
    this.setState({
      cate: cate
    })
  }

  handleClickLoadMore() {
    let {cate_total, page} = this.state
    this.setState({
      loadMoreState: 'loading'
    })
    if (Number(page) >= Number(cate_total)) {
      this.setState({
        loadMoreState: 'noMore'
      })
    } else {
      this.setState({
        page: page + 1,
        loadMoreState: 'more'
      })
      this.loadMore()
    }

  }


  render() {
    const tabList = [{title: '全部动态'}, {title: '日常闲聊'}, {title: '学习打卡'}, {title: '失物招领'}]
    const {current, uID, isShow, cate, cate_0, cate_1, cate_2} = this.state
    console.log(cate)
    return (
      <View className='main_square'>
        <AtTabs
          current={this.state.current}
          // scroll 标签页太多建议滚动
          tabList={tabList}
          onClick={this.handleClickTabChange}
        >
          <AtTabsPane current={current} index={0}>
            <CommentList
              dataList={cate}
              ID={uID}
              del={this.loaGetdDynamic}
            />
            <AtLoadMore
              onClick={this.handleClickLoadMore.bind(this)}
              status={this.state.loadMoreState}
            />
          </AtTabsPane>
          <AtTabsPane current={current} index={1}>
            <CommentList
              dataList={cate_0}
              ID={uID}
              del={this.loaGetdDynamic}
            />
          </AtTabsPane>
          <AtTabsPane current={current} index={2}>
            <CommentList
              dataList={cate_1}
              ID={uID}
              del={this.loaGetdDynamic}
            />
          </AtTabsPane>
          <AtTabsPane current={current} index={3}>
            <CommentList
              dataList={cate_2}
              ID={uID}
              del={this.loaGetdDynamic}
            />
          </AtTabsPane>
        </AtTabs>
        {
          isShow ?
            <AtFab className='fab_add' onClick={this.handleClicCreateDyNamic}>
              <Text className='at-fab__icon at-icon at-icon-add' />
            </AtFab> : ''
        }
      </View>
    )
  }
}

export default CampusSquare
